import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';

import defaultSettings from '@/config/default';

// 语言包
import en from 'element-plus/es/locale/lang/en';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

type ElSize = '' | 'default' | 'small' | 'large';

const useAppStore = defineStore('app', () => {
  const size = useStorage('size', defaultSettings.size);
  const language = useStorage('language', defaultSettings.language);

  const locale = computed(() => {
    return language.value == 'en' ? en : zhCn;
  });

  function changeSize(val: string) {
    size.value = val;
  }

  function changeLanguage(val: string) {
    language.value = val;
  }

  return {
    size,
    language,
    locale,
    changeSize,
    changeLanguage
  };
});

export { useAppStore };
